<template>
  <div class="box">
    <!-- 面包屑区域 -->
    <el-breadcrumb separator="/" class="user-tou">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <!-- v-model="" -->
        <!-- @clear="lierights"刷新列表  clearable更新数据-->
        <el-input
          v-model="formInline.query"
          placeholder="请输入内容"
          class="input-with-select"
          clearable
          @clear="lierights"
        >
          <el-button slot="append" icon="el-icon-search" @click="lierights" />
        </el-input>
      </el-form-item>
      <!-- 添加商品按钮 -->
      <el-form-item>
        <el-button type="primary" @click="goodspage">添加商品</el-button>
      </el-form-item>
      <!-- 列表项 -->
    </el-form>
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <el-table :data="rightsfrom" border style="width: 100%">
        <el-table-column type="index" width="60" />
        <el-table-column prop="goods_name" label="商品名称" width="500" />
        <el-table-column
          prop="goods_price"
          label="商品价格（元）"
          width="110"
        />

        <el-table-column prop="goods_number" label="商品重置" width="130" />
        <el-table-column prop="upd_time" label="创建时间" />
        <el-table-column prop="mg_state" label="操作">
          <!-- @click="handleDelete(scope.$index, scope.row)" -->
          <template #default="{ row }">
            <!-- //修改按钮 -->
            <el-button size="mini" type="primary" icon="el-icon-edit"
              >编辑</el-button
            >
            <el-button
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="shan(row.goods_id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block">
        <el-pagination
          :page-sizes="[1, 2, 5, 10]"
          :page-size="formInline.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="formInline.pagenum"
          background
          @size-change="goodsSizeChange"
          @current-change="goodsCurrentChange"
        >
          <!-- //使用了size-change和current-change事件来处理页码大小和当前页变动时候触发的事件。 -->
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getgoods, getgoodshan } from "@/api/goods";
export default {
  name: "LoginIndex",
  data() {
    return {
      // 数据获取
      rightsfrom: [],
      value1: true,
      total: 0,

      // 搜索框搜索内容
      formInline: {
        query: "", // 用户名
        pagenum: 1, // 当前页码数
        pagesize: 10, // 当前页数据条数
      },
    };
  },
  created() {
    this.lierights();
  },
  methods: {
    // 获取列表数据
    async lierights() {
      const res = await getgoods({
        query: this.formInline.query,
        pagenum: this.formInline.pagenum,
        pagesize: this.formInline.pagesize,
      });
      console.log(res);

      this.rightsfrom = res.data.goods;
      this.total = res.data.total;
    },
    // pagesize改变就会触发这个函数，我们将newPagesize赋值给pagesize，然后再刷新一下数据
    // 页码调用
    goodsSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pagesize = val;
      this.lierights();
    },
    // 监听页码值
    goodsCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pagenum = val;

      this.lierights();
    },
    // 删除id
    async shan(id) {
      // console.log(id);
      const res = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      console.log(res);
      if (res !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const shan = await getgoodshan(id);
      // console.log(shan);
      if (shan.meta.status !== 200) {
        return this.$message.error("删除用户失败");
      }
      this.$message.success("删除用户成功");
      this.lierights();
    },
    // 添加商品跳转路由
    goodspage() {
      this.$router.push("goods/app");
    },
  },
};
</script>

<style lang="less" scoped>
.user-tou {
  margin-bottom: 15px;
}
</style>
